<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <h2>节点的层级关系</h2>
        <ul class="list">
            1111111111
            <li class="first">01</li>
            <li>02</li>
            aaaaaaaa
            <li class="mid">03</li>
            bbbbbbbb
            <li>04</li>
            <li>05</li>
            <!-- <li class="last">06</li> -->
            2222222222
        </ul>
    </div>
</body>
<script>
    // 节点: 文档节点 元素节点 属性节点 文本节点 注释节点

    // 节点之间的层级关系
    // 父节点  (文档节点 元素节点)
    // 子节点  (元素节点 文本节点 注释节点)
    // 同胞节点  (元素节点 文本节点 注释节点)
    // 根节点

    // 元素之间关系 (主要操作元素)
    // 父元素 (元素节点)
    // 子元素 (元素节点)
    // 同级元素  (元素节点)

    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");

    console.log("---------------子---------------");

    // 子节点和子元素
    // Element.childNodes 子节点
    // Element.children 子节点

    console.log(ul.childNodes); // 子节点
    console.log(ul.children); // 子元素

    // 第一个 子节点和子元素
    // Element.firstChild  第一个子节点
    // Element.firstElementChild  第一个子元素
    console.log(ul.firstChild)
    console.log(ul.firstElementChild)

    // 最后一个 子节点和子元素
    // Element.lastChild  最后一个子节点
    // Element.lastElementChild  最后一个子元素
    
    console.log(ul.lastChild)
    console.log(ul.lastElementChild)

    console.log("---------------父---------------");

    // 父节点 父元素
    console.log(ul.parentNode); // 父节点  => wrap
    console.log(ul.parentElement); // 父元素

    // console.log(ul.parentNode.parentNode); // 父节点的父节点  => body
    // console.log(ul.parentElement.parentElement); // 父元素的父元素

    // console.log(ul.parentNode.parentNode.parentNode);   // html
    // console.log(ul.parentElement.parentElement.parentElement);

    // console.log(ul.parentNode.parentNode.parentNode.parentNode);   // html的父节点 document
    // console.log(ul.parentElement.parentElement.parentElement.parentElement);   // html的父元素null


    console.log("---------------同级---------------");
    // 同胞节点  同级元素

    // 前一个 同胞节点 同级元素
    // Element.previousSibling 前一个 同胞节点 
    // Element.previousElementSibling 前一个元素节点
    console.log(mid.previousSibling);
    console.log(mid.previousElementSibling);


    // 后一个 同胞节点 同级元素
    // Element.nextSibling 后一个 同胞节点 
    // Element.nextElementSibling 后一个元素节点
    console.log(mid.nextSibling);
    console.log(mid.nextElementSibling);





</script>
</html>